<template>
    <div>
        <Card v-if="isNone">您还没有添加任何商品，去逛逛吧</Card>
        <Card v-for="(item,index) in cartList" :key="item.cartId" :value="item.cartId">
            <Row style="height: 90px" type="flex" align="middle">
                <Col span="2">
                    <Checkbox v-model="item.seleted" @on-change="calTotalPrice(index)" size="large"></Checkbox>
                </Col>
                <Col span="4">
                    {{ item.productName }}
                </Col>
                <Col style="height: 100px" span="4">
                    <img v-bind:src="CoverList[index]" style="height: 100%;width: auto">
                </Col>
                <Col span="3">
                    加入时间：{{ item.addDate }}
                </Col>
                <Col span="2">
                    单价：{{ item.price }}
                </Col>
                <Col span="3">
                    <Button @click="brief(item.productId)">查看详情</Button>
                </Col>
                <Col span="4">
                    <Button icon="ios-close-circle-outline" @click="remove(item.cartId,index)">移除</Button>
                </Col>
            </Row>
        </Card>
        <Col offset="18" v-if="!isNone">
            <p>总价：{{ totalPrice }}</p>
            <Button type="primary" @click="buyAll">结账！</Button>
        </Col>

    </div>
</template>

<script>
    import axios from "axios";
    import globalData from "@/utils/globalData";

    export default {
        name: "ProductCart",
        data: function () {
            return {
                selectedItem: false,
                totalPrice: 0.0,
                isNone:true,
                cartList: [],
                CoverList:[],
                sellerAvatarList:[]//未增加
            }
        },
        created: function () {
            let self = this
            axios({
                method: 'get',
                url: '/cart/' + globalData.USER.userId
            }).then(function (res) {
                self.cartList = res.data
                //给购物车中的商品增加是否被选中的属性
                for (let i = 0; i < self.cartList.length; i++)
                    self.cartList[i].seleted = false
                if(self.cartList.length!=0)
                    self.isNone=false
                //试图获取订单中商品的封面
                console.log("enter")
                for (let i = 0; i < self.cartList.length; i++) {
                    self.CoverList[i] = ''
                    self.sellerAvatarList[i]=''
                    axios({
                        method: 'get',
                        url: "/file/sig/product/" + self.cartList[i].coverUUID,
                        responseType: 'blob'
                    }).then(function (res) {
                        //good
                        self.$set(self.CoverList, i, window.URL.createObjectURL(res.data))
                        // console.log(self.CoverList[0])
                    })
                    //试图获取卖家头像
                    axios({
                        method:'get',
                        url:'file/sig/avatar/'+self.cartList[i].sellerUUID,
                        responseType: 'blob'
                    }).then(function (res) {
                        self.$set(self.sellerAvatarList,i,window.URL.createObjectURL(res.data))
                    })
                }
            })
        },
        methods: {
            brief(val) {
                console.log("VAL"+val)
                this.$router.push({name: 'ProductBrief', params: {productId: val}});
            },
            buyAll() {
                console.log(this.cartList)
                for(let i =this.cartList.length-1;i>=0;i--){
                    if(this.cartList[i].seleted){
                        let tempCart = this.cartList[i]
                        //后端，将被选中的商品加入到Order中
                        axios({
                            method:'post',
                            url:"/orderItem",
                            data:{
                                productId:tempCart.productId,
                                productName:tempCart.productName,
                                buyerId:tempCart.userId,
                                sellerId:tempCart.sellerId,
                                sellerName:tempCart.sellerName,
                                coverUUID:tempCart.coverUUID,
                                sellerUUID:tempCart.sellerUUID,
                                price:tempCart.price
                            }
                        })
                        //后端删除
                        axios({
                            method:'delete',
                            url:"/cart/"+tempCart.cartId
                        })
                        //后端，将被选中的商品设置为已卖出
                        axios({
                            method:'patch',
                            url:'product/buy/'+this.cartList[i].productId,
                        })
                        //前端，移除被选中的商品
                        this.cartList.splice(i,1)
                    }
                }
                this.totalPrice=0
                this.$Message.success("结账成功！您可以去订单中查看详细信息")
            },
            calTotalPrice(index){
                if(this.cartList[index].seleted){//添加至购物车
                    this.totalPrice+=this.cartList[index].price
                }else {
                    this.totalPrice-=this.cartList[index].price
                }
            },
            remove(cid,index){
                //前端删除
                this.cartList.splice(index,1)
                if(this.cartList.length==0){
                    this.isNone=true
                }
                //后端删除
                console.log(cid)
                let self = this
                axios({
                    method: 'delete',
                    url:"/cart/"+cid
                }).then(function () {
                    self.$Notice.success({
                        title:"删除成功"
                    })
                })
            }
        }
    }
</script>

<style scoped>

</style>